<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-11-08 14:26:54
 * @LastEditTime: 2024-11-08 15:25:38
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \markdown-magic\src\pages\ImgToBase64\page\entry\ImgToBase64.vue
 * Copyright 版权声明
-->
<template>
  <div class="pageWrap">
    <a-upload-dragger
      v-model:fileList="fileList"
      name="file"
      :maxCount="1"
      :multiple="false"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      :before-upload="beforeUpload"
      :customRequest="customRequest"
      list-type="picture"
      @change="handleChange"
      @drop="handleDrop"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击选择或拖拽图片到这里上传</p>
      <p class="ant-upload-hint">
        单次上传一个文件，文件格式可为png、jpg、jpeg
      </p>
    </a-upload-dragger>
    <div class="resWrap" v-if="sourceImgUri !== ''">
      <h3 class="title">
        <strong>data uri</strong>
        <a-button type="primary" size="small" @click="handleCopy('uri')">复制</a-button>
      </h3>
      <div class="res">
        <a-textarea v-model:value="sourceImgUri" :rows="5"/>
      </div>
    </div>
    <div class="resWrap" v-if="sourceImgCss !== ''">
      <h3 class="title">
        <strong>css</strong>
        <a-button type="primary" size="small" @click="handleCopy('css')">复制</a-button>
      </h3>
      <div class="res">
        <a-textarea v-model:value="sourceImgCss" :rows="5"/>
      </div>
    </div>
    <div class="resWrap" v-if="sourceImgHtml !== ''">
      <h3 class="title">
        <strong>html</strong>
        <a-button type="primary" size="small" @click="handleCopy('html')">复制</a-button>
      </h3>
      <div class="res">
        <a-textarea v-model:value="sourceImgHtml" :rows="5"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { getBase64 } from '@/utils/index.js'

const fileList = ref([])
const sourceFile = ref(null)
const sourceImg =  ref('')

const sourceImgUri = ref('')
const sourceImgCss = ref('')
const sourceImgHtml = ref('')

const handleChange = (info) => {
  const status = info.file.status
  if (status !== 'uploading') {
  }
  if (status === 'done') {
    message.success(`${info.file.name} file uploaded successfully.`)
  } else if (status === 'error') {
    message.error(`${info.file.name} file upload failed.`)
  } else if (status === 'removed') {
    sourceFile.value = null
    sourceImg.value = ''
    sourceImgUri.value = ''
    sourceImgCss.value = ''
    sourceImgHtml.value = ''
  }
}
const handleDrop = (e) => {
  console.log(e)
}

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('请上传png、jpg、jpeg格式的图片!');
  }
  const isLt2M = file.size / 1024 / 1024 < 1000;
  if (!isLt2M) {
    message.error('图片必须小于1000MB!');
  }
  return isJpgOrPng && isLt2M;
}

// 自定义上传
const customRequest = async (e) => {
  sourceFile.value = null
  sourceFile.value = e.file
  // 获取图片的base64码
  sourceImg.value = await getBase64(e.file)
  sourceImgUri.value = sourceImg.value
  sourceImgCss.value = `div.image {
    width: 288px;
    height: 288px;
    background-image: url(${sourceImgUri.value});
}`
  sourceImgHtml.value = `<img width="288" height="288" src="${sourceImgUri.value}">`
  fileList.value[0].status = 'done'
}

// 复制
const handleCopy = async (type) => {
  try {
    let textToCopy = ''
    if (type === 'uri') {
      textToCopy = sourceImgUri.value
    } else if (type === 'css') {
      textToCopy = sourceImgCss.value
    } else if (type === 'html') {
      textToCopy = sourceImgHtml.value
    }
    await navigator.clipboard.writeText(textToCopy)
    message.success(`文本已复制到剪贴板`)
  } catch (error) {
    message.error(`复制到剪贴板失败：${error}`)
  }
}
</script>



<style lang="scss" scoped>
.pageWrap {
  .resWrap{
    .title{
      margin: 0;
      padding: 12px 0;
      display: flex;
      strong{
        font-size: 18px;
        color: #333;
        flex: 1;
      }
    }
    .res{
      word-break: break-all;
    }
  }
}
</style>